<template>
    <div>
        <div v-for="item in data" :key="item.tar">
            <div class="anchor-link-item" @click="goAnchor(item)">
                <a :class="currentAnchor === item.tar ? 'active-a' : ''" href="javascript:void(0)">
                    {{ item.title }}
                </a>
            </div>
            <div v-if="item.children && item.children.length > 0" class="anchor-link-group">
                <AnchorLink :data="item.children" @goAnchor="goAnchor" :currentAnchor="currentAnchor"></AnchorLink>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "AnchorLink",
        props: {
            data: {
                type: Array,
                default: () => [],
            },
            currentAnchor: {
                type: String,
                default: '',
            },
        },
        methods: {
            goAnchor(item) {
                this.$emit('goAnchor', item.tar);
                this.$parent.emitAnchor(item)
            },
        },
    };
</script>
<style scoped>
    a {
        color: #515a6e;
        text-decoration: none;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    a:hover {
        color: #57a3f3 ;
    }

    .active-a {
        color: #2d8cf0;
    }

    .anchor-link-group {
        margin-left: 10px;
    }
</style>
